import React, { Component } from 'react';
import {TabBar} from 'antd-mobile'
import { AppOutline, AppstoreOutline, UnorderedListOutline,  ShopbagOutline, UserOutline } from 'antd-mobile-icons'
import { withRouter } from 'react-router-dom';
import '../styles/MyTabbar.css'

class MyTabbar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tabs: [
                {
                    key: '/index/home',
                    title: '店铺',
                    icon: <AppOutline />,
                },
                {
                    key: '/index/cate',
                    title: '分类',
                    icon: <AppstoreOutline />,
                },
                {
                    key: '/index/allgoods',
                    title: '所有商品',
                    icon: <UnorderedListOutline />,
                },
                {
                    key: '/index/shopcart',
                    title: '购物车',
                    icon: <ShopbagOutline />,
                },
                {
                    key: '/index/mine',
                    title: '我的',
                    icon: <UserOutline />,
                },
            ],
            activeKey:'/index/home'
        }
    }

     //  点击变化
     handleChange(key){
        this.props.history.push(key)
        this.setState({activeKey:key})
    }

    render() {
        return (
            <div className='mytabbar'>
                <TabBar activeKey={this.state.activeKey} onChange={(key)=>{this.handleChange(key)}}>
                    {
                        this.state.tabs.map(item => (
                            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                        ))
                    }
                </TabBar>
            </div>
        );
    }
}
// withRouter高阶组件，为没有location,history,match三个路由对象添加路由
export default withRouter(MyTabbar);